<template>
  <el-dialog
    v-model="props.personalDialog"
    :title="props.personalForm?.title + '-详情'"
    width="40%"
    @close="close"
  >
    <el-row class="row">
      <el-col :span="12">
        <div>设备编号：{{ form.deviceNum }}</div>
      </el-col>
      <el-col :span="12">
        <div>设备型号：{{ form.deviceModelName }}</div>
      </el-col>
    </el-row>
    <el-row class="row">
      <el-col :span="12">
        <div>设备名称：{{ form.deviceName }}</div>
      </el-col>
      <el-col :span="12">
        <div>位置号：{{ form.seatNum }}</div>
      </el-col>
    </el-row>
    <el-row class="row">
      <el-col :span="12">
        <div>设备类型：{{ form.deviceTypeName }}</div>
      </el-col>
      <el-col :span="12">
        <div>所在部门：{{ form.deptName }}</div>
      </el-col>
    </el-row>
    <el-divider />
    <div v-if="props.personalForm?.title == '维修'">
      <div class="title">履历信息</div>
      <div v-if="form.repairType == 1">
        <div class="title2">报修信息</div>
        <el-row class="row">
          <el-col :span="12">
            <div>故障描述：{{ form.description }}</div>
          </el-col>
          <el-col :span="12">
            <div>报修人：{{ form.createUserName }}</div>
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="12">
            <div>
              故障照片：
              <div style="display: flex; flex-flow: row wrap">
                <div v-for="(item, index) in failurePictures">
                  <el-image
                    style="width: 84px; height: 84px; margin-right: 10px"
                    :src="item"
                    :zoom-rate="1.2"
                    :preview-src-list="failurePictures"
                    :initial-index="index"
                    fit="cover"
                  />
                </div>
                <div v-for="(item, index) in failureVedio">
                  <video
                    :src="item"
                    class="avatar"
                    controls="controls"
                    style="width: 84px; height: 84px; margin-right: 10px"
                    @play="handleFullScreen"
                  ></video>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div>故障报修时间：{{ form.createTime }}</div>
          </el-col>
        </el-row>
        <el-divider />
      </div>
      <div class="title2">故障信息</div>
      <el-row class="row">
        <el-col :span="12">
          <div>故障等级：{{ form.failureLevel }}</div>
        </el-col>
        <el-col :span="12">
          <div>故障类型：{{ form.failureCategory }}</div>
        </el-col>
      </el-row>
      <el-row class="row">
        <el-col :span="24">
          <div>故障现象：{{ form.failurePhenomenon }}</div>
        </el-col>
      </el-row>
      <el-row class="row" v-if="form.repairType == 2">
        <el-col :span="24">
          <div>故障描述：{{ form.description }}</div>
        </el-col>
      </el-row>
      <el-row class="row">
        <el-col :span="24">
          <div>解决方案：{{ form.solution }}</div>
        </el-col>
      </el-row>
      <el-divider />
      <div class="title2">维修信息</div>
      <el-row class="row">
        <el-col :span="12">
          <div>维修工单号：{{ form.repairOrderNum }}</div>
        </el-col>
        <el-col :span="12">
          <div>
            维修类型：{{
              form.repairType == 1
                ? '内部维修'
                : form.repairType == 2
                ? '委外维修'
                : ''
            }}
          </div>
        </el-col>
      </el-row>
      <el-row class="row">
        <el-col :span="12">
          <div>
            维修状态：{{
              form.repairStatus == 1
                ? '待维修'
                : form.repairStatus == 2
                ? '维修中'
                : form.repairStatus == 3
                ? '待验证'
                : form.repairStatus == 4
                ? '关闭-待验证'
                : form.repairStatus == 5
                ? '维修完成'
                : '维修关闭'
            }}
          </div>
        </el-col>
        <el-col :span="12" v-if="form.repairType == 2">
          <div>
            维修费用：{{
              form.outsourceFee == '' ? 0 + '元' : form.outsourceFee + '元'
            }}
          </div>
        </el-col>
      </el-row>
      <el-row class="row" v-if="form.repairType == 2">
        <el-col :span="12">
          <div>维修厂家：{{ form.repairFactory }}</div>
        </el-col>
        <el-col :span="12">
          <div>维修人：{{ form.repairUserName }}</div>
        </el-col>
      </el-row>
      <el-row class="row">
        <el-col :span="24">
          <div>维修内容：{{ form.content }}</div>
        </el-col>
      </el-row>
      <el-row class="row">
        <el-col :span="24">
          <div>
            维修照片：
            <div style="display: flex; flex-flow: row wrap">
              <div v-for="(item, index) in repairPictures">
                <el-image
                  style="width: 84px; height: 84px; margin-right: 10px"
                  :src="item"
                  :zoom-rate="1.2"
                  :preview-src-list="repairPictures"
                  :initial-index="index"
                  fit="cover"
                />
              </div>
              <div v-for="(item, index) in repairVedio">
                <video
                  :src="item"
                  class="avatar"
                  controls="controls"
                  style="width: 84px; height: 84px; margin-right: 10px"
                  @play="handleFullScreen"
                ></video>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="row">
        <el-col :span="12">
          <div>维修开始时间：{{ form.startTime }}</div>
        </el-col>
        <el-col :span="12">
          <div>维修结束时间：{{ form.endTime }}</div>
        </el-col>
      </el-row>
      <div class="row">
        <div v-if="form.repairType == 2">
          <div>附件:</div>
          <div class="fileList">
            <div v-for="item in fileList" class="fileBox">
              <div class="fileItem">
                <div style="display: flex; line-height: 40px">
                  <img
                    v-if="item.suffix == '.doc' || item.suffix == '.docx'"
                    style="width: 40px; height: 40px"
                    src="../../../assets/doc.png"
                    alt=""
                  />
                  <img
                    v-else-if="item.suffix == '.xls' || item.suffix == '.xlsx'"
                    style="width: 40px; height: 40px"
                    src="../../../assets/xls.png"
                    alt=""
                  />
                  <img
                    v-else-if="item.suffix == '.png' || item.suffix == '.jpg'"
                    style="width: 40px; height: 40px"
                    src="../../../assets/png.png"
                    alt=""
                  />
                  <img
                    v-else-if="item.suffix == '.ppt'"
                    style="width: 40px; height: 40px"
                    src="../../../assets/ppt.png"
                    alt=""
                  />
                  <img
                    v-else-if="item.suffix == '.pdf'"
                    style="width: 40px; height: 40px"
                    src="../../../assets/PDF.png"
                    alt=""
                  />
                  <img
                    v-else
                    style="width: 40px; height: 40px"
                    src="../../../assets/other.png"
                    alt=""
                  />
                  <div class="filename">{{ item.name }}</div>
                </div>
                <div
                  style="
                    color: var(--el-color-primary);
                    cursor: pointer;
                    line-height: 40px;
                  "
                  @click="xiazai(item.name, item.url)"
                >
                  下载
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>维修备件列表</div>
      <el-table :data="form.partList" border style="width: 100%" show-summary>
        <el-table-column prop="partNum" label="备件编号" />
        <el-table-column prop="partName" label="备件名称" />
        <el-table-column prop="partTypeName" label="备件类型" />
        <el-table-column prop="totalAmount" label="使用数量" />
        <el-table-column prop="totalMoney" label="备件总价值" />
      </el-table>
      <el-divider />
      <div class="title2">验证信息</div>
      <el-row class="row">
        <el-col :span="12">
          <div>
            验证结果：{{
              form.verifyStatus == 0
                ? '待验证'
                : form.verifyStatus == 1
                ? '通过'
                : '不通过'
            }}
          </div>
        </el-col>
        <el-col :span="12">
          <div>验证人：{{ form.verifyUserName }}</div>
        </el-col>
      </el-row>
      <el-row class="row">
        <el-col :span="12">
          <div>验证提交时间：{{ form.verifyTime }}</div>
        </el-col>
      </el-row>
    </div>
    <div v-if="props.personalForm?.title == '维保'">
      <div class="title">履历信息</div>
      <el-row class="row">
        <el-col :span="12">
          <div>履历类型：维保</div>
        </el-col>
        <el-col :span="12">
          <div>开始时间：{{ form.planBeginDate }}</div>
        </el-col>
      </el-row>
      <el-row class="row">
        <el-col :span="12">
          <div>维保周期：{{ form.period + form.periodUnit }}</div>
        </el-col>
        <el-col :span="12">
          <div>结束时间：{{ form.planEndDate }}</div>
        </el-col>
      </el-row>
      <el-row class="row">
        <el-col :span="12">
          <div>维保类型：{{ form.maintainTypeName }}</div>
        </el-col>
        <el-col :span="12">
          <div>维保人：{{ form.maintainUserName }}</div>
        </el-col>
      </el-row>
      <el-row class="row">
        <el-col :span="12">
          <div>提交维保时间：{{ form.factEndDate }}</div>
        </el-col>
      </el-row>
      <div class="title">维保信息</div>
      <el-table :data="form.maintainItemRequests" border style="width: 100%">
        <el-table-column type="index" label="序号" />
        <el-table-column prop="itemName" label="维保项目" />
        <el-table-column prop="content" label="保养内容" />
        <el-table-column prop="maintainResult" label="维保结果">
          <template #default="scope">
            <span>{{
              scope.row.maintainResult == 1
                ? '正常'
                : scope.row.maintainResult == 2
                ? '异常'
                : '--'
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="dealWay" label="处理方式">
          <template #default="scope">
            <span>{{
              scope.row.dealWay == 1
                ? '维保处理'
                : scope.row.dealWay == 2
                ? '维保报修处理'
                : '--'
            }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="title">维保备件列表</div>
      <el-table :data="form.partList" border style="width: 100%" show-summary>
        <el-table-column prop="partNum" label="备件编号" />
        <el-table-column prop="partName" label="备件名称" />
        <el-table-column prop="partTypeName" label="备件类型" />
        <el-table-column prop="totalAmount" label="使用数量" />
        <el-table-column prop="totalMoney" label="备件总价值" />
      </el-table>
      <el-row class="row">
        <el-col :span="24">
          <div>
            维保照片：
            <div style="display: flex">
              <div v-for="(item, index) in maintainPictures">
                <el-image
                  style="width: 84px; height: 84px; margin-right: 10px"
                  :src="item"
                  :zoom-rate="1.2"
                  :preview-src-list="maintainPictures"
                  :initial-index="index"
                  fit="cover"
                />
              </div>
              <div v-for="(item, index) in maintainVedio">
                <video
                  :src="item"
                  class="avatar"
                  controls="controls"
                  style="width: 84px; height: 84px; margin-right: 10px"
                  @play="handleFullScreen"
                ></video>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { repairDetailApi, repairDetailByOrderNumApi } from '/@/api/repair'
import { getWBTaskInfoApi } from '/@/api/maintain'
import { bindFileUrlApi } from '/@/api/publicApi'
const props = defineProps({
  personalDialog: Boolean,
  personalForm: Object
})
let tableData = <any>[]
const emit = defineEmits(['closePersonal'])
const close = () => {
  emit('closePersonal')
}

const form = ref<any>({})
const repairPictures = ref<any>([])
const repairVedio = ref<any>([])
const failurePictures = ref<any>([])
const failureVedio = ref<any>([])
const maintainPictures = ref<any>([])
const maintainVedio = ref<any>([])
const fileList = ref<any>([])
const getDetail = () => {
  //repairDetailByOrderNumApi
  failurePictures.value = []
  failureVedio.value = []
  repairPictures.value = []
  repairVedio.value = []
  fileList.value = []
  repairDetailByOrderNumApi(props.personalForm?.orderNum).then((res) => {
    if (res.code == 0) {
      form.value = res.data
      let arr = res.data.failurePictures.split(',')
      if (res.data.failurePictures != '') {
        arr.forEach((item: any) => {
          let a = item.lastIndexOf('\?')
          let str = item.substring(a - 3, a)
          if (str == 'png' || str == 'jpg' || str == 'peg') {
            failurePictures.value.push(item)
          } else {
            failureVedio.value.push(item)
          }
        })
      }
      let brr = res.data.repairPictures.split(',')
      if (res.data.repairPictures != '') {
        brr.forEach((item: any) => {
          let a = item.lastIndexOf('\?')
          let str = item.substring(a - 3, a)
          if (str == 'png' || str == 'jpg' || str == 'peg') {
            repairPictures.value.push(item)
          } else {
            repairVedio.value.push(item)
          }
        })
      }
      if (res.data.fileUrls != '') {
        let fileNames = form.value.fileNames.split(',')
        let fileUrls = form.value.fileUrls.split(',')
        fileNames.forEach((i: any, index: any) => {
          let str = fileUrls[index].substring(fileUrls[index].lastIndexOf('.'))
          fileList.value.push({
            name: i + str,
            suffix: str,
            url: fileUrls[index]
          })
        })
      }
    }
  })
}

const getDetail2 = () => {
  //repairDetailByOrderNumApi
  maintainPictures.value = []
  getWBTaskInfoApi(props.personalForm?.orderNum).then((res) => {
    if (res.code == 0) {
      form.value = res.data
      let arr = res.data.maintainPictures.split(',')
      if (res.data.maintainPictures != '') {
        arr.forEach((item: any) => {
          let a = item.lastIndexOf('\?')
          let str = item.substring(a - 3, a)
          if (str == 'png' || str == 'jpg' || str == 'peg') {
            maintainPictures.value.push(item)
          } else {
            maintainVedio.value.push(item)
          }
        })
      }
    }
  })
}

const handleFullScreen = (e: any) => {
  launchFullscreen(e.target)
}

const launchFullscreen = (element: any) => {
  //此方法不可以在異步任務中執行，否則火狐無法全屏
  if (element.requestFullscreen) {
    element.requestFullscreen()
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen()
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen()
  } else if (element.oRequestFullscreen) {
    element.oRequestFullscreen()
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullScreen()
  } else {
    var docHtml = document.documentElement
    var docBody = document.body
    var videobox = element
    var cssText = 'width:100%;height:100%;overflow:hidden;'
    docHtml.style.cssText = cssText
    docBody.style.cssText = cssText
    videobox.style.cssText = cssText + ';' + 'margin:0px;padding:0px;'
    document.IsFullScreen = true
  }
}

const xiazai = (name: any, url: any) => {
  bindFileUrlApi(url).then(async (res) => {
    // window.open(res.data)
    let response = await fetch(res.data)
    let blob = await response.blob()
    let objectUrl = window.URL.createObjectURL(blob)
    let a = document.createElement('a')
    a.href = objectUrl
    a.download = name
    a.click()
    a.remove()
  })
}

watch(
  () => props.personalDialog,
  () => {
    if (props.personalForm?.title == '维修') {
      getDetail()
    } else {
      getDetail2()
    }
  }
)
</script>
<style scoped lang="scss">
.title {
  font-weight: 600;
  margin: 10px 0;
}

.title2 {
  font-weight: 600;
  margin: 10px 0;
}

.row {
  margin: 8px;
  font-weight: 400;
}

.fileList {
  width: 600px !important;
  display: flex;
  flex-flow: row wrap;

  .fileBox {
    width: 48%;
    background: #f2f2f2ff;
    margin: 2px;
    padding: 5px;

    .fileItem {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }
}
.filename {
  width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 5px;
}
</style>
